<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">优惠券号:</p>
			</el-col>
			<el-col :span="4">
				<el-input v-model="numData" size="small" clearable placeholder="请输入优惠券号">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车牌号:</p>
			</el-col>
			<el-col :span="4">
				<el-input v-model="plateNumData" size="small" clearable placeholder="请输入车牌号">
				</el-input>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">活动:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="nameData" left size="small" placeholder="请选择活动" clearable>
					<el-option v-for="item in queryActiveCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<el-button type="primary" size="small" v-on:click="couponQuery">查询</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-form :model="couponFormData" ref="couponForms" :rules="useRule" label-width="100px">
				<el-col :span="12">
					<el-form-item label="所属活动:" prop="name">
						{{couponFormData.name}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="赠送礼品:" prop="gift">
						{{couponFormData.gift}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="礼品价值:" prop="cost">
						{{couponFormData.cost}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车主姓名:" prop="contactName">
						{{couponFormData.contactName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话:" prop="contactPhone">
						{{couponFormData.contactPhone}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="车牌号:" prop="plateNum">
						{{couponFormData.plateNum}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="VIN:" prop="vin">
						{{couponFormData.vin}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="优惠券号:" prop="num">
						{{couponFormData.num}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="优惠券类型:" prop="couponType">
						{{couponFormData.couponType == '1'?'储值卡':'优惠券'}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="优惠券状态:" prop="status">
						{{couponFormData.status}}
						<!--<el-select v-model="couponFormData.status" placeholder="" left size="small" clearable disabled style="width:200px;">
							<el-option v-for="item in statusCombo" :label="item.label" :value="item.value" readonly>
							</el-option>
						</el-select>-->
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="使用时间:" prop="useDate">
						{{couponFormData.useDate}}
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="有效期:" prop="youxiaoqi">
						{{couponFormData.youxiaoqi}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="发券人:" prop="caozuoCode">
						{{couponFormData.caozuoCode}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="打印人:" prop="dayinCode">
						{{couponFormData.dayinCode}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="工单号:" prop="gongdanId">
						<el-input size="small" v-model="couponFormData.gongdanId" style="width:200px;">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="使用备注:" prop="useRemark">
						<el-input size="small" v-model="couponFormData.useRemark" style="width:200px;">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="打印时间:" disabled prop="dayinDate">
						<el-date-picker v-model="couponFormData.dayinDate" type="date" size="small" disabled readonly>
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="couponFormData.couponType == '1'">
					<el-form-item label="优惠券余额:" prop="remainder" >
						{{couponFormData.remainder}}
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="couponFormData.couponType == '1'">
					<el-form-item label="使用金额:" prop="useMoney" >
						<el-input size="small" v-model="couponFormData.useMoney" style="width:200px;">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-button type="primary" @click="saveCoupon" style="text-align:center" v-if="buttonShow">使用</el-button>
				</el-col>
			</el-form>
		</el-row>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			//状态转换
			levelConvertData: {},
			//优惠券号查询条件
			numData: '',
			//车牌号查询条件
			plateNumData: '',
			//使用按钮显示
			buttonShow: false,
			//活动名称查询条件
			nameData: '',
			//活动名称
			NAMEData: {
				total: '',
				dataList: []
			},

			//优惠券初始
			emptFormData: {
				id: '',
				name: '',
				gift: '',
				cost: '',
				degression: 0,
				gscost: 0,
				useDate: '',
				num: '',
				useRemart: '',
				status: '',
				gongdanId: '',
				usercarId: '',
				activityId: '',
				comboId: '',
				createDate: '',
				chanzhi: '',
				youxiaoqi: '',
				useRemark: '',
				caozuoName: '',
				dayinName: '',
				dayinDate: '',
				vin: '',
				matchOrdernum: '',
				matchAmount: '',
				plateNum: '',
				contactName: '',
				contactPhone: '',
				caozuoCode: '',
				dayinCode: '',
				couponType:'',//优惠券状态
				remainder:'',//优惠券余额
				useMoney:'',//使用金额
			},
			//优惠券表单数据
			couponFormData: {
				id: '',
				name: '',
				gift: '',
				cost: '',
				degression: 0,
				gscost: 0,
				useDate: '',
				num: '',
				remart: '',
				status: '',
				gongdanId: '',
				usercarId: '',
				activityId: '',
				comboId: '',
				createDate: '',
				chanzhi: '',
				youxiaoqi: '',
				useRemark: 'PC销券',
				caozuoName: '',
				dayinName: '',
				dayinDate: '',
				vin: '',
				matchOrdernum: '',
				matchAmount: '',
				plateNum: '',
				contactName: '',
				contactPhone: '',
				caozuoCode: '',
				dayinCode: '',
				couponType:'',//优惠券状态
				remainder:'',//优惠券余额
				useMoney:'',//使用金额

			},
			useRule: {
				gongdanId: [{
					required: true,
					message: '请填写工单号',
					trigger: 'blur'
				}],
				useRemark: [{
					required: true,
					message: '请填写使用方式',
					trigger: 'blur'
				}],
				useMoney: [{
					required: true,
					message: '请填写使用金额',
					trigger: 'blur'
				}],
			},
			queryActiveCombo: [],
			useActiveCombo: [],
			statusCombo: [],
			youxiaoqi: '',
			dayinDate: '',
			useDate: '',
			statuscombo: [],
		}

	},
	methods: {

		//查询
		couponQuery: function () {
			var data1 = this.$data.numData;
			var data2 = this.$data.plateNumData;
			var data3 = this.$data.nameData;
			if (data1 == '' && data2 == '' && data3 == '') {
				this.$message("请填写查询条件！")
			} else {

				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/coupon/useInfo',
					params: {
						num: this.$data.numData,
						plateNum: this.$data.plateNumData,
						activityId: this.$data.nameData,
					}
				}).then(function (resp) {
					if (resp.data.data.useDate == null || resp.data.data.useDate == '') {
						resp.data.data.useDate = '';
					} else {
						resp.data.data.useDate = this.moment(Number(resp.data.data.useDate)).format("YYYY-MM-DD");
					};
					if (resp.data.data.youxiaoqi == null || resp.data.data.youxiaoqi == '') {
						resp.data.data.youxiaoqi = '';
					} else {
						resp.data.data.youxiaoqi = this.moment(Number(resp.data.data.youxiaoqi)).format("YYYY-MM-DD");
					};
					if(resp.data.data.dayinDate == null){
						resp.data.data.dayinDate = '';
					}
					//resp.data.data.dayinDate = new Date(Number(resp.data.data.dayinDate));
					if(resp.data.data.couponType == '1'&&resp.data.data.remainder > 0&&resp.data.data.status == '1'){
						this.$data.buttonShow = true;
					}
					if (resp.data.data.couponType != '1'&&resp.data.data.status == '1'){
						this.$data.buttonShow = true;
					}

					//

					//优惠券
					if (resp.data.data.youxiaoqi < new Date() && resp.data.data.youxiaoqi != '') {
						this.$data.buttonShow = false;
						resp.data.data.status = '已过期';
						//debugger
						//this.$message.error("当前优惠券已过期！") ;
					}

					if (resp.data.data.useRemark == '' || resp.data.data.useRemark == null) {
						resp.data.data.useRemark = 'PC销券'
					}



					this.$data.couponFormData = resp.data.data;
					if (this.$data.couponFormData.status == '0'){
						this.$data.couponFormData.status ="未打印"
					}else if (this.$data.couponFormData.status == '1'){
						this.$data.couponFormData.status ="已打印"
					}else if (this.$data.couponFormData.status == '2'){
						this.$data.couponFormData.status ="已使用"
					}else if (this.$data.couponFormData.status == '3'){
						this.$data.couponFormData.status ="已过期"
					}

				}),
					function (error) {

					}
			}
		},
		//保存
		saveCoupon: function () {

			this.$refs.couponForms.validate(function (valid) {
				if (valid) {
					debugger;
					if(this.$data.couponFormData.couponType == '1'){
						this.$data.couponFormData.remainder = Number(this.$data.couponFormData.remainder) - Number(this.$data.couponFormData.useMoney);
					}else {
						this.$data.couponFormData.remainder = "";
						this.$data.couponFormData.useMoney = "";
					}
					this.$http({
						method: "POST",
						url: this.API_ROOT + '/crm/coupon/use',
						params: {
							useRemark: this.$data.couponFormData.useRemark,
							num: this.$data.couponFormData.num,
							gongdanId: this.$data.couponFormData.gongdanId,
							remainder: this.$data.couponFormData.remainder,
							useMoney: this.$data.couponFormData.useMoney,
						}

					}).then(resp => {
						if (resp.data.success) {
							this.$message(resp.data.msg);
							this.couponQuery();
							this.$data.buttonShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {

					});
				}
				return false;
			}.bind(this));


		},

		//状态转换
		leverCov: function (row, item) {
			return this.$data.levelConvertData[row.status];
		},
		levelCovert: function () {
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "030101"
				}
			}).then((response) => {
				this.$data.levelConvertData = response.data;
			}, (response) => { });
		},

	},
	created: function () {
		//
		this.levelCovert();
		//获取所属活动下拉
		this.$http.get(this.API_ROOT + '/crm/activity/combo', {
			params: {
			}
		}).then((response) => {
			this.$data.queryActiveCombo = response.data;
		}, (response) => { });

		this.$http.get(this.API_ROOT + '/crm/activity/combo', {
			params: {
				inUse: "1"
			}
		}).then((response) => {
			this.$data.useActiveCombo = response.data;
		}, (response) => { });

		//获取状态下拉
		this.$http.get(this.API_ROOT + '/base/dict/combo', {
			params: {
				group: "030101"
			}
		}).then((response) => {
			this.$data.statusCombo = response.data;
		}, (response) => { });




	}
}
</script>